<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">

    <link rel="stylesheet" href="css/weui.css">
    <link rel="stylesheet" href="css/jquery-weui.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_689900_jcdrhysqlt.css">

    <style>
        .weui-grid{width:25%;padding:6px 10px;}
        .weui-grid:before{border:0;}
        .weui-grid:after{border:0;}
        .back1{position: relative;}
        .sys{position: absolute;top:17px;right:17px;z-index: 10;}
        .sys .iconfont{font-size: 30px;color:#fff;}
        .weui-grid__icon{width: 65px;height: 65px;}
        .weui-grid__icon .iconfont{font-size: 65px;}
    </style>
</head>
<body class="back1">
<div class="sys" onclick="alert(123)">
    <i class="iconfont icon-saoyisao"></i>
</div>
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="images/1527758283(1).jpg" alt=""></div>
        <div class="swiper-slide"><img src="images/1527758283(2).jpg" alt=""></div>
    </div>
    <div class="swiper-pagination"></div>
</div>

<div style="background: #fff;">
<div id="scrollDiv">
    <ul>
        <li>这是公告标题的第一行这是公告标题的第一行</li>
        <li>这是公告标题的第二行</li>
        <li>这是公告标题的第三行</li>
    </ul>
</div>
</div>

<div class="weui-grids" style="background: #fff;margin-top: 5px;padding: 0 15px;">
    <a href="javascript:;" class="weui-grid js_grid">
        <div class="weui-grid__icon">
            <i class="iconfont icon-iOS" style="color:#2196f3;"></i>
        </div>
        <p class="weui-grid__label">
            签到
        </p>
    </a>
    <a href="javascript:;" class="weui-grid js_grid">
        <div class="weui-grid__icon">
            <i class="iconfont icon-iOS" style="color:#e91e63;"></i>
        </div>
        <p class="weui-grid__label">
            我的订单
        </p>
    </a>
    <a href="javascript:;" class="weui-grid js_grid">
        <div class="weui-grid__icon">
            <i class="iconfont icon-iOS" style="color:#2196f3;"></i>
        </div>
        <p class="weui-grid__label">
            购物车
        </p>
    </a>
    <a href="javascript:;" class="weui-grid js_grid">
        <div class="weui-grid__icon">
            <i class="iconfont icon-iOS" style="color:#e91e63;"></i>
        </div>
        <p class="weui-grid__label">
            个人中心
        </p>
    </a>
    <a href="javascript:;" class="weui-grid js_grid">
        <div class="weui-grid__icon">
            <i class="iconfont icon-iOS" style="color:#e91e63;"></i>
        </div>
        <p class="weui-grid__label">
            我的团队
        </p>
    </a>
</div>

    <div class="mb70"></div>
    <div class="weui-flex weui-fixed-btm">
        <div class="weui-flex__item">
            <a href="javascript:;" class="weui-fixed-btn weui-btn_primary">
                <i class="iconfont icon-shouyefill"></i>
                <p>首页</p>
            </a>
        </div>
        <div class="weui-flex__item">
            <a href="myCenter.html" class="weui-fixed-btn">
                <i class="iconfont icon-yonghu"></i>
                <p>用户中心</p>
            </a>
        </div>
    </div>

<script src="js/jquery.min.js"></script>
<script src="js/jquery-weui.min.js"></script>
<script src="js/swiper.min.js"></script>
<script>
    var mySwiper = new Swiper('.swiper-container', {
        autoplay: 3000,//可选选项，自动滑动
        speed:500,  //滑动速度
        pagination : '.swiper-pagination', // 分页器
        paginationType : 'bullets', //fraction 数字分页坐标  bullets 加点页坐标
        loop:true, // 连续循环
        autoplayDisableOnInteraction : false, // 滑动后继续滑动
        //autoHeight: true, //高度随内容变化
    });
    function AutoScroll(obj){
        $(obj).find("ul:first").animate({
            marginTop:"-40px"
        },500,function(){
            $(this).css({marginTop:"0px"}).find("li:first").appendTo(this);
        });
    }
    $(document).ready(function(){
        setInterval('AutoScroll("#scrollDiv")',3000);
    });
</script>
</body>
</html>

